<template>
  <a-table :columns="columns" :data="data" row-key="index" :pagination="false" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const columns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 100
  },
  {
    title: '本期摊销周期',
    dataIndex: 'periodicity',
    key: 'periodicity'
  },
  {
    title: '累计摊销期数',
    dataIndex: 'amortization_step',
    key: 'amortization_step'
  },
  {
    title: '本期摊销金额',
    dataIndex: 'amount',
    key: 'amount'
  },
  {
    title: '累计摊销金额',
    dataIndex: 'total_amount',
    key: 'total_amount'
  },
  {
    title: '待摊金额',
    dataIndex: 'remaining_amount',
    key: 'remaining_amount'
  },
  {
    title: '待摊期数',
    dataIndex: 'remaining_period',
    key: 'remaining_period'
  },
  {
    title: '摊销时间',
    dataIndex: 'time',
    key: 'time'
  }
]);

const data = ref([
  {
    index: 1,
    periodicity: '2023-Q1',
    amortization_step: '50%',
    amount: '1000',
    total_amount: '5000',
    remaining_amount: '2000',
    remaining_period: '2',
    time: '2023-01-01'
  },
  {
    index: 2,
    periodicity: '2023-Q2',
    amortization_step: '75%',
    amount: '1500',
    total_amount: '6500',
    remaining_amount: '1000',
    remaining_period: '1',
    time: '2023-04-01'
  }
]);
</script>
